<template>
  <div class="topMain van-ellipsis">
    <div class="topBackgroup flex jcc">
      <div class="flex jcsb aic mainWidth dis500">
        <!-- 左 -->
        <div class="flex aic">
          <div class="fs18 mgr20 prColor">{{ topData.name }}</div>
          <div class="prColor">
            <span><van-icon name="location-o" />{{ topData.mrCity }}</span>
          </div>
          <div class="fs12">[切换城市]</div>
          <div
            v-for="(i, index) in leftTag"
            :class="active == index ? 'prColor' : ''"
          >
            {{ i }}
          </div>
        </div>
        <!-- 右 -->
        <div class="flex aic">
          <div
            v-for="i in rightTag"
            class="c9 pdx10"
            :class="i.rBoder ? 'rBoder' : ''"
          >
            <span><van-icon :name="i.icon" class="cr" /></span>
            <span :class="i.icon ? 'prColor' : ''">{{ i.name }}</span>
            <span v-if="i.isLink"
              ><van-icon name="arrow-down" size="12"
            /></span>
          </div>
          <div class="login" @click="topage('../../login/login.html')">登录/注册</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
@import "../../public.css";
@import "../../ui/vant-ui/ui.css";
.topMain {
  font-size: 12px;
  color: #666;
}
.topBackgroup {
  background-color: #f9f9f9;
  padding: 10px;
}
.topBackgroup div {
  margin-right: 8px;
}
.searchInput .btn {
  border: none;
  width: 100px;
  background-color: var(--primary-color);
  color: #fff;
  transform: translate(-2px, 0);
}

.login {
  border: 1px solid var(--primary-color);
  padding: 2px 10px;
  border-radius: 10px;
}
.login:hover {
  color: var(--primary-color);
}
.mainWidth {
  width: 1400px;
  color: #999;
}


@media (max-width: 500px) {
  .topBackgroup {
    padding: 0 !important;
  }
 
}
</style>
<script>
module.exports = {
  name: "top",
  data() {
    return {
      leftTag: [
        "首页",
        "推荐职位",
        "搜索 · 公司",
        "校园 · 海归",
        "APP",
        "咨询",
        "有了",
        "无障碍专区",
      ],
      rightTag: [{ name: "我要招聘" }, { name: "我要找工作" }],
      active:0,
    };
  },
  props: {
    topData: {
      type: Object,
      default: function () {
        return {
          name: "网站名字",
          mrCity: "阳江",
        };
      },
    },
  },
  methods: {
    topage(url){
      window.location.href = url;
    }
  },
};
</script>
